<template>
<div>
        <header>
            <!-- 头像 -->
            <aside></aside>

            <!-- 用户名 -->
            <p>{{username}}</p>

            <!-- 退出按钮 -->
            <button @click="logout()">退出按钮</button>
        </header>
</div>

</template>

<script>
export default {
    name : "HomeHeader",
    data(){
        //访问会话存储中存储的登陆者账号
        // let loginuser = sessionStorage.getItem('islogin');

        return{
            // username : loginuser,//在页面渲染前读取会话存储的数据并赋值
            username : "",
        }
    },
    created(){
        this.getUsername();
    },
    methods:{
            // 获取用户名
    getUsername() {
      const loginUser = sessionStorage.getItem("islogin");
      if (loginUser) {
        this.username = loginUser;
      } else {
        // 如果没有登录信息，跳转到登录页面
        this.$router.push("/login");
      }
    },
        logout(){
            //清除sessionStorage
            sessionStorage.clear();
            //跳转
            alert('已退出');
            this.$router.push('/login');

        }
    }
}
</script>

<style>
 header{
    width: 100%;
    height: 78px;
    background-color: #008b8b;
    display: flex;
    align-items: center;
 }
 header aside{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(206, 206, 206);
    margin-left: 50px;
 }
 header p{
    margin-left: 30px;
    margin-right: 15px;
    font-size: 14px;
    color: white;
    font-weight: 800;
 }
 header button{
    border: none;
    background-color: unset;
    padding: 20px 10px;
    box-shadow: 0px 0px 6px;
    border-radius: 5px;
 }
</style>